<template>
	<view class="personal">
		<!-- 头像 -->
		<view class="avatarBox">
			<button plain open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<u-avatar size="50" :src="formData.header_img"></u-avatar>
				<text class="avatar-text">点击修改头像</text>
			</button>
		</view>
		<!-- 表单 -->
		<view class="form">
			<u--form labelPosition="left" :model="formData" labelWidth="80">
				<u-form-item label="姓名" prop="name" borderBottom>
					<u--input v-model="formData.name" type="nickname" border="none"></u--input>
				</u-form-item>
				<!-- <u-form-item label="手机号" prop="phone" borderBottom>
					<u--input v-model="formData.phone" border="none"></u--input>
				</u-form-item> -->
				<u-form-item label="性别" prop="sex" borderBottom>
					<u-radio-group v-model="formData.sex" placement="row">
						<u-radio label="男" :name="1" customStyle="margin-right: 20px;"></u-radio>
						<u-radio label="女" :name="2"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="生日" prop="birth_date" :customStyle="{padding: '0px'}">
					<u-cell isLink :border="false" :title="formatDate" @click="showDatetimePicker=true"></u-cell>
					<u-datetime-picker ref="datetimePicker" :show="showDatetimePicker" v-model="formData.birth_date"
						mode="date" :maxDate="maxDate" :minDate="minDate" title="选择日期" :closeOnClickOverlay="true"
						@cancel="showDatetimePicker=false" @close="showDatetimePicker=false"
						@confirm="showDatetimePicker=false"></u-datetime-picker>
				</u-form-item>
			</u--form>
		</view>
		<!-- 按钮 -->
		<view class="button">
			<u-button text="保存" @click="updateInfo"
				:customStyle="{backgroundColor: '#ff516b',color: '#fff',borderRadius: '40rpx',height: '80rpx'}"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				// 弹出日期选择器
				showDatetimePicker: false,
				// 日期最大值
				maxDate: +new Date(),
				// 日期最小值
				minDate: +new Date('1950-01-01'),
				// 表单数据
				formData: {
					id: '',
					name: '',
					sex: 1,
					phone: '',
					birth_date: '',
					header_img: '',
				}
			}
		},
		computed: {
			...mapState(['userInfo']),
			// 日期格式化
			formatDate() {
				return this.$moment(this.formData.birth_date).format('YYYY-MM-DD');
			},
		},
		methods: {
			...mapMutations(['SaveUserInfo']),
			// 修改头像
			onChooseAvatar(e) {
				// console.log(e.detail.avatarUrl);
				let avatarUrl = e.detail.avatarUrl;

				// 转换为base64格式
				const fs = wx.getFileSystemManager();
				fs.readFile({
					filePath: avatarUrl,
					encoding: 'base64',
					position: 0,
					success: async (res) => {
						// console.log(res.data);
						// 将base64文件格式转换为线上图片
						let imageInfo = await this.$api.other.uploadImageAPI(res.data);
						let imageURL = imageInfo.result.url;
						this.formData.header_img = imageURL;
						// console.log(imageURL);
					},
					fail(res) {
						console.error('pages/personal.vue --> onChooseAvatar', res)
					}
				});
			},
			// 获取初始信息
			getInitUserInfo() {
				this.formData.id = String(this.userInfo.id);
				this.formData.header_img = this.userInfo.header_img;
				this.formData.name = this.userInfo.name || '游客01';
				this.formData.sex = this.userInfo.sex || 1;
				this.formData.phone = this.userInfo.phone;
				this.formData.birth_date = this.userInfo.birth_date || +new Date('2000-01-01');
			},
			// 保存用户信息
			async updateInfo() {
				let data = await this.$api.user.updateUserInfoAPI(this.formData);
				// console.log(data);
				// 操作成功，也把本地存储更新一下
				if (data.msg === '成功操作') {
					// 拷贝一份新的userInfo
					let newInfo = uni.$u.deepClone(this.userInfo);
					// 更新userInfo的数据
					newInfo = {
						...newInfo,
						...this.formData
					};
					this.SaveUserInfo(newInfo);
				}
			},
			// 日期选择器格式化日期
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
		},
		onShow() {
			// 获取初始信息
			this.getInitUserInfo();
		},
		onReady() {
			// 微信小程序需要用此写法,日期选择器格式化
			this.$refs.datetimePicker.setFormatter(this.formatter);
		},
	}
</script>

<style lang="scss" scoped>
	.personal {
		@include page-bgc();
		padding-top: 20rpx;

		// 头像
		.avatarBox {
			@include whiteCard();
			padding: 40rpx 0 60rpx;

			::v-deep button {
				border: none;
				height: auto;
				width: fit-content;
				display: flex;
				flex-direction: column;
				align-items: center;

				.avatar-text {
					font-size: 24rpx;
					color: #aaa;
					margin-top: 8px;
				}
			}
		}

		// 表单
		.form {
			@include whiteCard();
			padding: 4px 10px;

			::v-deep .u-cell__body {
				padding-left: 0;
			}
		}

		// 按钮
		.button {
			margin: 60rpx 20rpx;
		}
	}
</style>